<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Watch Party</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
	body {
		padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	}
	.tweetbox{
		/*max-width:460px;*/
	}
	.tweetboxImg{
		clear:both;
		float:left;
		padding-top:5px;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:5px;
	}
	.tweetboxText{
		padding-top:5px;
	}
	.tweetboxOuterDiv{
		 border-top: 1px solid #CCCCCC;
		 min-height:58px;
	}
	.tweetboxOuterDiv p{
		margin-bottom:0;
		padding-bottom:0;
	}
	.dateString{
		color:#777;
		font-size:10px;
		padding-left:10px;
	}
	#timelineUL{
		list-style-type: none;
		margin:0;
		height:240px;
		overflow:scroll;
	}
	#chatdiv{
		height:240px;
		overflow:scroll;
	}
	.segmentControl{
		margin-bottom:10px;
	}
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
            <ul class="nav" id="navUL">
              <li id="mingleTab" class="active"><a href="javascript:void(0);" onclick="javascript:tabClicked('mingleTab');">Mingle</a></li>
              <li id="readTab"><a href="javascript:void(0);" onclick="javascript:tabClicked('readTab');">Read</a></li>
              <li id="vipTab"><a  href="javascript:void(0);" onclick="javascript:tabClicked('vipTab');">VIP Room</a></li>
	      <li id="surveyTab"><a href="javascript:void(0);" onclick="javascript:tabClicked('surveyTab');" style="font-family:entypo;"><img src="img/POVtoplogo.jpg"></a></li>
            </ul>
      </div>
    </div>
	
    <div class="container">
      <div id="readDiv" class="tabDiv" style="display:none;">
	<img src="img/MissourianLOGO.jpg" >
	<br/>
	<p>The latest reports and information from the Columbia Missourian, serving the comunity since 1908.</p>	
      </div>
      <div id="vipDiv" class="tabDiv" style="display:none;"></div>
      <div id="helpDiv" class="tabDiv" style="display:none;"></div>
      <div id="surveyMonkeyInfo" style="display:none;">
	<div>
		<script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=j0ryB3I_2bt3QebTbjvRZW0w_3d_3d"> </script>
	</div>Create your <a href="http://www.surveymonkey.com/">free online surveys</a> with SurveyMonkey, the world's leading questionnaire tool.
      </div>
      <div id="infoDiv" class="tabDiv">
		<img src="img/logos.jpg">
		<br/>
		<p>Welcome to the party. I'm Reuben Stern, host of KBIA's weekly program Intersection. I'll be your host for this evening. Here's what you can do tonight using the menu above.
		<ul>
			<li><p><span style="color:#BE1E2D; font-weight:bold;">Mingle</span> with others, join the conversation, and view the latest Twitter updates.</p></li>
			<li><p><span style="color:#BE1E2D; font-weight:bold;">Read</span> the latest news from the Columbia Missourian and background information on the candidates from the voter's guide.</p></li>
			<li><p>Learn about our <span style="color:#BE1E2D; font-weight:bold;">VIP Room</span> guests and discuss the latest results with them.</p></li>
			<li><p>Click the <span style="color:#BE1E2D; font-weight:bold;">Help</span> tab if you have any questions for me about the party.</p></li>
		</ul>
		<p style="font-weight:bold;">Be a social butterfly & mingle</p>
		<span class="twitterButton"></span>
		<p style="font-eight:bold;">Or, just be a wallflower</p><button style="float:left;" onclick="loadMingleTab();" class="btn">Go!</button>
      </div>
      <div id="mingleDiv" class="tabDiv" style="display:none;">
	<div class="btn-group segmentControl" style="float:left;">
		<button id="liveChatBtn" class="btn active" onclick="javascript:liveChatButtonClicked();">Live chat</button>
		<button id="twitterBtn" class="btn" onclick="javascript:twitterButtonClicked();">Twitter</button>
	</div>
	<select id="tweetCategories" style="clear:both; float:left; display:none;">
		<option value="Obama2012" onchange="javascript:loadTimeline('Obama2012');">Obama2012</option>
		<option value="RomneyRyan2012" onchange="javascript:loadTimeline('RomneyRyan2012');">RomneyRyan2012</option>
		<option value="midvMOvotes" onchange="javascript:loadTimeline('midMOvotes');">midMOvotes</option>
		<option value="debate2012" onchange="javascript:loadTimeline('debate2012');">debate2012</option>
	</select>
	<button id="refreshButton" class="btn" style="margin-left:10px; display:none;">Refresh</button>
	<select id="chatCategories" style="clear:both; float:left;">
		<option value="topicName">Topic Name</option>
		<option value="president" onclick="javascript:loadChatRoom('president');">President</option>
		<option value="us-senate" onclick="javascript:loadChatRoom('us-senate');">U.S. Senate</option>
		<option value="us-house" onclick="javascript:loadChatRoom('us-house');">U.S. House</option>
		<option value="state-elections" onclick="javascript:loadChatRoom('state-elections');">State Elections</option>
		<option value="ballot-issues" onclick="javascript:loadChatRoom('ballot-issues');">Ballot Issues</option>
		<option value="vip-room" onclick="javascript:loadChatRoom('vip-room');">VIP Room</option>
	</select>
	<div style="clear:both;">
		<span id="login"></span>
		<span id="twitter-connect-placeholder" class="twitterButton"></span>
	</div>
	<div id="welcomeDiv" style="clear:both; display:none:">
		<div style="float:left; max-width:17%;">
                        <img src="img/reuben.jpg">
                </div>
		<div style="clear:both; float:left;">	
			<p style="clear:both; color:#BE1E2D; margin-left:10px;">Welcome to the conversation!</p>
			<ul style="clear:both;">
                	        <li>Choose a topic name from the drop down menu or start mingling.</li>
             	                <li>Contribute to the conversation by posting a comment using the What do you think? box.</li>
                        	<li>Post your comment simultaneously to your Twitter account by checking that box.</li>
                	        <li>Hit the Twitter button to check what others are Tweeting</li>
        	                <li>Read about our expert guests and chat with them in the VIP room.</li>
	                        <li>If you have any questions, hit the help button.</li>
                	        <li>Please remember to keep the conversation civil, and enjoy mingling!</li>
         	       </ul>
		</div>
	</div>
	<div id="outerChatDiv" style="display:none;">
		<form id="chatForm" action="javascript:chatButtonClicked();" style="display:none;">
                        <input id="chatInput" style="width:100%;" type="text" style="clear:both" ></input>
                        <input id="chatSumbit" type="button" class="btn" style="display:none;" />
                </form>
		<div id="chatdiv" style="clear:both;"></div>
	</div>
        <div id="timelineDiv" style="clear:both; display:none;">
                <ul id="timelineUL"></ul>
        </div>
      </div>
    </div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://timeago.yarp.com/jquery.timeago.js"></script>
	<script type="text/javascript" src="http://www.feedgraph.com/demos/party/party.js"></script>
	<script type="text/javascript" src="http://www.feedgraph.com/js/feedgraph.js"></script>
	<script type="text/javascript" src="http://www.feedgraph.com/demos/party/temper.js"></script>
	<script type="text/javascript" src="js/jquery.watermarkinput.js"></script>
	<script src="http://platform.twitter.com/anywhere.js?id=Vlo1pnK78MTQTxe7b7eXEw&v=1" type="text/javascript"></script>	   
	<script type="text/javascript">
		/* templates */
                temper.include("templates/chat.html");
                temper.include("templates/tweetItem.html");
		temper.include("templates/news.html");
		temper.include("templates/blue.html");
                var chatItem = temper.script("chat-item");
                var tweetItem = temper.script("tweet-item");
		var newsItem = temper.script("news-item");
		var blueItem = temper.script("blue-item");

		var name = "";
		var watcher;
		var chatWatcher;
		var currentChatRoom;

		var tweetCount = 0;
		var messageCount = 0;

		var currentUser, screenName, profileImage, profileImageTag;

		function signinBtnClicked(){

		}
		
		function tabClicked(tabName){
			//update nav bar to reflect the active tab
			$("#navUL li").removeClass('active');
			$("#"+tabName).addClass('active');
	
			//hide the all of the page's conent
			$(".tabDiv").hide();

			switch(tabName){
				case "mingleTab":
					loadMingleTab();
					break;
				case "readTab":
					loadReadTab();
					break;
				case "vipTab":
					//
					break;
				case "helpTab":
					//
					break;
				case "surveyTab":
					loadSurveyTab();
					break;
				default:
					//
					break;
			}
		}

		function loadReadTab(){
			$("#surveyMonkeyInfo").hide();
			$("#readDiv").hide();
			$("#readDiv").show();
			registerNewsHandler("election",onNewsItem);
		}

		function loadMingleTab(){
			$("#surveyMonkeyInfo").hide();
			$("#readDiv").hide();
			$("#infoDiv").hide();
			$("#mingleDiv").show();
		}

		function loadSurveyTab(){
			$("#readDiv").hide();
                        $("#infoDiv").hide();
                        $("#mingleDiv").hide();
			$("#surveyMonkeyInfo").show();
		}

		function twitterButtonClicked(){
			//update segmented control
			$("#liveChatBtn").removeClass("active");
			$("#twitterBtn").addClass("active");
				
			//show / hide appropriate UI components
			$("#welcomeDiv").hide();
			$("#outerChatDiv").hide();
			$("#chatCategories").hide();
			$("#timelineDiv").show();
			$("#tweetCategories").show();
			$("#refreshButton").show();

			//default to the "Obama2012" twitter feed 
			loadTimeline("Obama2012");
		}

		function liveChatButtonClicked(){
			//update segmentd control
			$("#twitterBtn").removeClass("active");
			$("#liveChatBtn").addClass("active");

			//show / hide appropriate UI components
			$("#timelineDiv").hide();
			$("#outerChatDiv").show();
			$("#chatCategories").show();
			$("#refreshBUtton").hide();
			$("#tweetCategories").hide();

			//kill the timeline
			if(watcher){
				watcher.cancel();
			}

			//clear the timeline
			$("#timelineUL").html(' ');

			//scroll to the bottom of the chat div
			var objDiv = document.getElementById("chatdiv");
			objDiv.scrollTop = objDiv.scrollHeight;

		}

		function chatButtonClicked(){
			//send message to feedGraph if it is not null
			var message = $("#chatInput").val();
			if(message){
				//send message to feedGraph
				onSendChat(message);
			}
		}

		function loadTimeline(category){
			//clear the twitter timeline
			$("timelineUL").html(' ');

			$("#refreshButton").unbind('click');			
			$("#refreshButton").click(function(){
				console.log('click');
				loadTimeline(category);
			});
		
			//disconnect the previous timeline and connect to the new one
			if (watcher){
				watcher.cancel();
			}
			//watcher = registerTweetHandler(category,onTweet);
			getLatestTweets(category,onTweet);
		}

		function loadChatRoom(chatRoomName){
			//store the name of the current chatRoom
			currentChatRoom = chatRoomName;
			
			//clear the chatroom
			$("#chatdiv").html(' ');

			$("#welcomeDiv").hide();
                        $("#outerChatDiv").show();

			//disconnect the previous chatroom and connect to the new one
			if(chatWatcher){
				chatWatcher.cancel();
			}
			chatWatcher = registerMessageHandler(chatRoomName,onMessage);
		}

		function onMessage(obj) {
			var messageTokens = obj.Message.split(" ");
			var m = 0;
			for(m=0;m<messageTokens.length;m++){
				if (messageTokens[m].length>=7){
					if(messageTokens[m].substring(0,7)=="http://"){
						messageTokens[m] = "<a target='_blank' href='"+messageTokens[m]+"' >"+messageTokens[m]+"</a>";
					}
				} else if (messageTokens[m].length>=8){
					if(messageTokens[m].substring(0,8)=="https://"){
                                                messageTokens[m] = "<a target='_blank' href='"+messageTokens[m]+"' >"+messageTokens[m]+"</a>";
                                        }
				}
			}
			
			obj.Message = messageTokens.join(" ");

			//append the message to the list and increment messageCount
			if(messageCount % 2 == 1){
				chatItem.append("chatdiv", obj);
			}else{
				blueItem.append("chatdiv",obj);
			}

			var objDiv = document.getElementById("chatdiv");
			messageCount++;

			//remove the oldest message if there are > 150 messages
			if(messageCount>150){
				$("timelineUL li:first").remove();
			}

			//scroll to the bottom of the chat window
			objDiv.scrollTop = objDiv.scrollHeight;
		}

		function onNewsItem(obj){
			newsItem.append("readDiv", obj);
                }


		function onTweet(obj){
			//prepend the tweet to the list and increment tweetCount
			$("#timelineUL").prepend(tweetItem.xform(obj));
			tweetCount++;

			//remove the oldest tweet if there are > 100 tweets
			if(tweetCount > 100){
				$("#timelineUL li:last").remove();
			}
		}

		function init() {
			//register the messsage handler with feedGraph
			//loadChatRoom("president");
		}

		function onSendChat(message) {
			//send the message to feedGraph
			postMessage(name,message,currentChatRoom);
			$("#chatInput").val('');
		}	

		$(document).ready(function(){
			setTimeout("init()",4000);
			$("#chatInput").Watermark("What do you think?");
			twttr.anywhere(function (T) {
				if (T.isConnected()) {
      					currentUser = T.currentUser;
      					name = currentUser.data('screen_name');
      					profileImage = currentUser.data('profile_image_url');
      					profileImageTag = "<img src='" + profileImage + "'/>";
      					//$('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
					$("#chatForm").show();
    				} else {
					T(".twitterButton").connectButton({
                                        authComplete: function(user) {
                                                // triggered when auth completed successfully
                                        },
                                        signOut: function() {
                                                // triggered when user logs out
                                        }
                                });

				};
  			});
		});
	</script>
  </body>
</html>
